<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">

        <el-form-item style="margin-right: 15px;">
          <el-input v-model="queryParams.name" placeholder="艺术品名称"></el-input>
        </el-form-item>

        <el-form-item style="margin-right: 15px;">
          <el-input :disabled="artistPageData.length !== 0" v-model="queryParams.artistName"
            placeholder="艺术家名字"></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
        </el-form-item>

        <el-form-item>
          <el-button v-if="!errors" type="primary" @click="add()"><i-ep-search />新增</el-button>
        </el-form-item>


      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <el-table :data="artworkPageData" style="width: 100%" border>
        <el-table-column prop="name" label="艺术品名称" />
        <el-table-column label="艺术品类型">
          <template #default="scope">
            <span v-for="item in artTypeList" :key="<string>item.typeId">{{
              item.typeId === scope.row.artwoktType ? <string>item.name : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="url" label="艺术品图片">
          <template #default="scope">
            <img v-if="scope.row.url !== null && scope.row.url !== ''" :src="scope.row.url" alt=""
              style="width: 100px;height: 100px;">
          </template>
        </el-table-column>
        <el-table-column prop="artistName" label="艺术家" />
        <el-table-column prop="artworkNum" label="编号" />
        <el-table-column prop="spec" label="规格" />
        <el-table-column prop="price" label="售价" />
        <el-table-column prop="createSrt" label="创作日期" />
        <el-table-column prop="sort" label="排序" />
        <el-table-column prop="isIndex" label="是否首页显示">
          <template #default="scope">
            <template v-if="scope.row.isIndex === 1">
              是
            </template>
            <template v-else>
              否
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
    </el-card>

    <!-- 修改弹框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="30%">
      <el-form :model="editForm" label-width="160px">
        <el-form-item label="艺术品名称">
          <el-input v-model="editForm.name" />
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="editForm.artistId" style="display: none;" />
          <el-input v-model="editForm.artistName" style="width: 200px;margin-right: 15px;" disabled />
          <el-button :disabled="artistPageData.length !== 0" @click="selectArtist">选择</el-button>
        </el-form-item>
        <el-form-item label="相片" prop="map2">
          <single-upload v-model="<string>editForm.url" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="editForm.sort" />
        </el-form-item>
        <el-form-item label="艺术品类型">
          <el-select filterable v-model="<string>editForm.artwoktType">
            <el-option v-for="item in artTypeList " :label="<string>item.name" :key="<string>item.typeId"
              :value="<string>item.typeId" />
          </el-select>
        </el-form-item>

        <el-form-item label="编号">
          <el-input v-model="editForm.artworkNum" />
        </el-form-item>

        <el-form-item label="规格">
          <el-input v-model="editForm.spec" />
        </el-form-item>

        <el-form-item label="价格">
          <el-input-number v-model="<number>editForm.price" />
        </el-form-item>


        <el-form-item label="创作时间">
          <el-input v-model="editForm.createSrt" />
        </el-form-item>
        <el-form-item label="是否首页显示">
          <el-select v-model="<number>editForm.isIndex">
            <el-option label="否" :value="0" />
            <el-option label="是" :value="1" />
          </el-select>

        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">
            取 消
          </el-button>
          <el-button type="primary" @click="editItem">
            确 定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 新增字母分组选择弹框 -->
    <el-dialog :title="groupDialog.title" v-model="groupDialog.visible" width="90%">
      <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
        <el-tab-pane label="全部" name="all">
          <template v-for="(group, index) in artistsByPinyiList">
            <el-button @click="confirmArtist(artist.name ?? '', artist.id ?? '')" v-for="artist in group.data">
              {{ artist.name }}
            </el-button>
          </template>
        </el-tab-pane>
        <el-tab-pane v-for="(group, index) in artistsByPinyiList" :label="<string>group.firstPy!.toUpperCase()"
          :name="group.firstPy">
          <el-button @click="confirmArtist(artist.name ?? '', artist.id ?? '')" v-for="artist in group.data">
            {{ artist.name }}
          </el-button>
          <!-- <el-checkbox-group v-model="group.checked">
            <el-checkbox v-for="artist in group.artists" :label="artist.name" :key="artist.name">{{ artist.name
              }}</el-checkbox>
          </el-checkbox-group> -->
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<!-- 艺术品页 -->
<script setup lang="ts">
import { useRoute } from 'vue-router';
import SingleUpload from "@/components/Upload/SingleUploadw.vue";
import ArtworkAPI from "@/api/artwork";
import ArtistAPI from "@/api/artist";
import type { TabsPaneContext } from 'element-plus'

import {

  ArtworkForm,
  Artwork,
  ArtworkPageResult,
  ArtworkQuery,
  ArtworkPageVO
} from "@/api/artwork/model";

import ArtTypesAPI from "@/api/artType";

import {

  ArtTypeForm,
  ArtType,
  ArtTypePageResult,
  ArtTypeQuery,
  ArtTypePageVO
} from "@/api/artType/model";

import {

  ArtistListByPinyiDTO,
  BaseItem,
  ArtistForm,
  ArtistQuery,
  ArtistPageVO
} from "@/api/artist/model";

const route = useRoute();

defineOptions({
  name: "Artwork",
  inheritAttrs: false,
});

const queryFormRef = ref(ElForm);


const editForm = reactive<ArtworkForm>({

});

const loading = ref(false);
const editDialogVisible = ref(false);


const artTypeList = ref<ArtType[]>([]);


const total = ref(0);

const queryParams = reactive<ArtworkQuery>({
  pageNum: 1,
  pageSize: 10,

});

const groupDialog = reactive({
  title: '选择艺术家',
  visible: false,
});
const activeName = ref('all');
const letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
// 艺术家分页数据
const artistPageData = ref<ArtistPageVO[]>([]);
const editArtistForm = reactive<ArtistForm>({

});

const errors = ref(false);

const artistsByPinyiList = ref<ArtistListByPinyiDTO[]>();

const artworkPageData = ref<ArtworkPageVO[]>();

const dialog = reactive({
  title: "",
  visible: false,
});

/**
 * 打开新增弹框
 */
function add() {
  editForm.id = null
  editForm.name = null;

  editForm.sort = null;
  editForm.createTime = null;
  editForm.updateTime = null;
  editForm.isIndex = 0;
  editForm.artworkId = null;
  editForm.artwoktType = null
  if (artistPageData.value.length > 0) {
    editForm.artistId = artistPageData.value[0].artistId;
    editForm.artistName = artistPageData.value[0].name;
  } else {
    editForm.artistId = null;
    editForm.artistName = null;
  }
  editForm.url = "";
  editForm.createSrt = null;
  editForm.price = 0.0;
  editForm.spec = null;
  editForm.artworkNum = ""

  editForm.departId = null;
  editForm.createUser = null;


  editForm.sort = null;
  dialog.visible = true;
}
/**
 * 打开修改弹框
 * @param row 
 */
function handleEdit(row: Artwork) {
  editForm.id = row.id;
  editForm.name = row.name;
  editForm.artistId = row.artistId;
  editForm.artistName = row.artistName;
  editForm.sort = row.sort
  editForm.createTime = row.createTime;
  editForm.updateTime = row.updateTime;
  editForm.isIndex = row.isIndex
  editForm.createSrt = row.createSrt;
  editForm.price = row.price
  editForm.spec = row.spec;
  editForm.artworkNum = row.artworkNum
  editForm.artwoktType = row.artwoktType;


  editForm.departId = row.departId
  editForm.createUser = row.createUser;
  // 图片
  editForm.url = row.url;
  dialog.visible = true;
}

/** 查询 */
function handleQuery() {
  loading.value = true;
  let artistId = <string>route.params.artistId;
  if (artistId != null && artistId != "" && artistId != undefined) {
    queryParams.artistId = artistId;
  }
  ArtworkAPI.getPage(queryParams)
    .then((data) => {
      artworkPageData.value = data.records;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}
/**
 * 保存修改
 */
function editItem() {
  // 当id存在时执行修改操作，否则执行新增操作
  if (editForm.artwoktType === null || editForm.artwoktType === undefined || editForm.artwoktType === "") {
    ElMessage.error("请选择艺术品艺术类型")
    return
  }
  if (editForm.name === null || editForm.name === undefined || editForm.name === "") {
    ElMessage.error("请填写艺术品名称")
    return
  }
  if (editForm.url === null || editForm.url === undefined || editForm.url === "") {
    ElMessage.error("请上传艺术品图片")
    return
  }


  if (editForm.id) {
    ArtworkAPI.update(editForm).then(() => {
      handleQuery();
      dialog.visible = false;
    })
  } else {
    ArtworkAPI.add(editForm).then(() => {
      handleQuery();
      dialog.visible = false;
    })
  }

}

const handleTabClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
/**
 * 确认选择艺术家
 * @param name 
 * @param id 
 */
function confirmArtist(name: string, id: string) {
  editForm.artistId = id;
  editForm.artistName = name;
  groupDialog.visible = false;
}
/**
 * 选择艺术家
 */
function selectArtist() {

  ArtistAPI.getListByFirstPy(editArtistForm).then((data) => {
    artistsByPinyiList.value = data;
    console.log(data)
    groupDialog.visible = true;
  })
}



function handleSelectArtist() {
  let articleId = <string>route.params.artistId;
  if (articleId === null || articleId === undefined || articleId == "") {
    return
  }
  let artistQueryParams = reactive<ArtistQuery>({
    pageNum: 1,
    pageSize: 10,
    artistId: articleId,
    honors: null
  });
  ArtistAPI.getPage(artistQueryParams)
    .then((data) => {
      artistPageData.value = data.records;
      if (artistPageData.value.length > 0) {
        queryParams.artistId = artistPageData.value[0].artistId;
        queryParams.artistName = artistPageData.value[0].name;
      } else {
        ElMessage.error("没有该艺术家数据")
        setTimeout(() => {
          errors.value = true;
        }, 100);
      }
    })
    .finally(() => {

    });
}
/**
 * 获取艺术类型列表
 */
function handleGetArtTypeList() {
  let artTypeQueryParams = ref<ArtTypeQuery>({
    pageNum: 1,
    pageSize: 100
  });
  ArtTypesAPI.getList(artTypeQueryParams.value).then((data) => {
    artTypeList.value = data;
    console.log(data, 99999)
  })
}

onMounted(() => {
  handleQuery();
  handleGetArtTypeList();
  handleSelectArtist();
});
</script>
